<script setup lang="ts">
import Banner1 from './banner/Banner1.vue';
import Banner2 from './banner/Banner2.vue';
import Banner3 from './banner/Banner3.vue';
import Banner4 from './banner/Banner4.vue';
import Banner5 from './banner/Banner5.vue';
import Banner6 from './banner/Banner6.vue';
import Banner7 from './banner/Banner7.vue';

const swiper = ref(null);

// onMounted(() => {
//   console.log('swiper', swiper?.value?.swiper.navigation.update());
// });
</script>

<template>
  <div class="banner relative">
    <swiper-container
      ref="swiper"
      class="tabletl:mx-2"
      :pagination="{ clickable: true, enabled: $bp.ltTabletl }"
      :navigation="{ prevEl: '.banner-prev', nextEl: '.banner-next' }"
      spaceBetween="10"
      :autoplay="{ pauseOnMouseEnter: true, delay: 5000 }"
      :loop="true"
    >
      <Banner6 />
      <Banner5 />
      <Banner7 />
      <Banner1 />
      <Banner2 />
      <Banner4 />
      <Banner3 />
    </swiper-container>
    <div class="nav -transform-y-50% absolute top-50% w-full flex items-center justify-between lt-tabletl:hidden">
      <span class="banner-prev cursor-pointer">
        <i class="i-local:banner-arrows-left absolute left--10 text-10" />
      </span>
      <span class="banner-next cursor-pointer">
        <i class="i-local:banner-arrows-right absolute right--10 text-10" />
      </span>
    </div>
  </div>
</template>

<style scoped lang="scss">
.banner {
  /* Hide default navigation buttons */
  .swiper-button-next.swiper-button-disabled,
  .swiper-button-prev.swiper-button-disabled {
    display: none;
  }
}
</style>
